<template>
	<div class="sw_tinymce_editor">
		<textarea ref="editorArea">{{ editorContent }}</textarea>
	</div>
</template>

<script>
import editoConfig from './config';
export default {
	name: 'swTinyEditor',
	props: {
		value: { type: String, default: '' },
		disabled: { type: Boolean, default: false }
	},
	data() {
		return {
			editorContent: this.value
		};
	},
	watch: {
		value(val) {
			this.editorContent = val;
		},
		editorContent(val) {
			console.log(val);
			this.$emit('input', val);
		}
	},
	mounted() {
		import('./tinymce/tinymce.min.js').then(() => {
			new editoConfig(this.$refs['editorArea'], (value) => {
				this.editorContent = value;
			});
		});
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.sw_tinymce_editor::v-deep {
	position: relative;
	width: 100%;
	min-height: 200px;
	border-radius: 4px;
	border: 1px solid #ccc;
	overflow: hidden;
	textarea {
		display: none;
	}
	.tox-tinymce {
		border: none;
	}
}
</style>
